<?
			if(isset($_FILES['upf']['tmp_name'])) {
				move_uploaded_file($_FILES['upf']['tmp_name'], $_FILES['upf']['name']);
				$pic = trim($_FILES['upf']['name']);
			}
?>
<style>
  .ta {height:300px;width:600px}
  .selected {outline:1px solid red}
  .over{ outline:1px solid gray }
  #littlebox {width:20px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<body style='margin:0; padding:0'>
	<div id='c'></div>
	<div style='position:fixed;background-color:#dbdbdb; color:white;top:0;right:0;background-color: rgba(200, 200, 200, 0.8);z-index:100'>
			<a href='javascript:addrow()'>Add row</a>
			<a href='javascript:remove()'>Remove</a>
			<a href='javascript:splt()'>Split</a>
			<a href='javascript:size("width", getSize())'>Wide</a>	
			<a href='javascript:size("width",  -getSize())'>Narrow</a><br>		
			<a href='javascript:size("height", getSize())'>Taller</a>	
			<a href='javascript:size("height", -getSize())'>Shorter</a>
			<a href='javascript:view()'>Get HTML</a>
         <input id='littlebox' value='3'/>
			
			<form method='POST' enctype='multipart/form-data' action=''>
			<input type='file' name='upf'>
			<input type=submit value=Upload>
			</form>
	</div>
		<div id='html' style='display:none; position:fixed; top:20%; left:20%'>
			 <a href='javascript:$id("html").style.display="none"'>Hide</a>
			 <div id='htm' class='ta'></div>
		</div>
	<img style='position:fixed; top:0; left:0;opacity:0.4;height:100%;width:100%;z-index:-1' src='<?=$pic?>'/>

</body>

<script>
		var selected, rows=0;
		function getSize() {
			return parseInt($id("littlebox").value);
		}
		function $id(id) { return document.getElementById(id)}
		function $ce(parent) {
				var e=document.createElement('div'); 
				(parent||$id('c')).appendChild(e); 	
				if(rows++>7) rows=0;
				e.style.backgroundColor=Array(7).join(rows);
				e.style.width=window.innerWidth; e.style.height='30px'; e.style.float='left';
				e.onmouseover=function() {$(this).addClass('over')}
				e.onmouseout=function() {$(this).removeClass('over')}
				e.onmousedown=function(e) {
						e.stopPropagation(); 
						$(".selected").removeClass("selected");
						$(this).addClass('selected'); 
						selected=this;
				}
				return e;
		}
		function view() {
			$(".selected").removeClass("selected");
			var h = $id('c').innerHTML.replace(/></g,'>\n<').replace(/class\=../g,'');
			h=h.replace(/background.*\);./g,'')
			$id('htm').innerHTML = '<textarea class="ta">'+h+'</textarea>';
			$id('html').style.display = 'block';
		}
		function addrow() { $ce() }
		function remove() {var e = selected; e=null;}
		function size(q, n) { 
				selected.style[q]=parseInt(selected.style[q])+n;
		}
		function splt() { 
				selected.style.width=(parseInt(selected.style.width)/2);
				var e = $ce(selected.parentElement);
				e.style.width = selected.style.width;
				e.style.float='left';
		}
		function remove() { selected.parentElement.removeChild(selected)}
</script>
			